<template>
    <div class="container">
      <div class="header">
        <div class="header-left" @click="goBack()">
          <van-icon size="25" name="arrow-left" />
        </div>
        订单详情 
      </div>
      <status-bar style="width: 100%;" :item="stateMap[detailData.trade_state]" />
      <div class="tips">
        <div class="dzf" v-if="detailData.trade_state === '待支付'">
          <div class="text1">订单待支付</div>
          <div class="text2">
            请在
            <Counter :second="second"/>
            内完成支付，超时订单自动取消
          </div>
          <div class="text3">
            <van-button @click="showCode = true" type="success">立即支付（10元）</van-button>
          </div>
        </div>
        <div class="dzf" v-if="detailData.trade_state === '待服务'">
          <div class="text1">正在为您安排服务专员</div>
          <div class="text2">请保持手机畅通，稍后有服务专员与您联系</div>
        </div>
        <div class="dzf" v-if="detailData.trade_state === '已完成'">
          <div class="text1">服务已完成</div>
          <div class="text2">感谢您的使用，如有售后服务请联系客服</div>
        </div>
        <div class="dzf" v-if="detailData.trade_state === '已取消'">
          <div class="text1">订单已取消</div>
          <div class="text2">期待下次为您服务，如需帮助可咨询客服</div>
        </div>  
        <van-cell-group class="card">
          <div class="header-text">预约信息</div>
          <van-cell 
            v-for="(item, key) in makeInfo" 
            :key="key"
            :title="item" 
            :value="formatData(key)" 
          />
        </van-cell-group>
        <van-cell-group class="card">
          <div class="header-text">订单信息</div>
          <van-cell 
            v-for="(item, key) in orderInfo" 
            :key="key"
            :title="item" 
            :value="formatData(key)" 
          />
        </van-cell-group>
        <!-- 支付二维码弹窗 -->
        <van-dialog :show-confirm-button="false" v-model:show="showCode" :show-cancel-button="false">
          <van-icon name="cross" class="close" @click="closeCode"></van-icon>
          <div></div>
          <van-image width="150" height="150" :src="codeImg"></van-image>
          <div>请使用本人微信扫描二维码</div>
        </van-dialog>
      </div>
    </div>
  </template>
  
  <script setup>
  import Qrcode from 'qrcode';
  import { onMounted, ref, getCurrentInstance, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import statusBar from '../../components/statusBar.vue';
  import Counter from '../../components/counter.vue';
  const add = ()=>{
    console.log(detailData.order_start_time)
  }
  const showCode = ref(false);
  const codeImg = ref('');
  //获得当前vue的实例
  const { proxy } = getCurrentInstance();
  const route = useRoute();
  const router = useRouter();
  //详情页的数据
  const detailData = ref({});
  //计算倒计时
  const second = computed(() =>{
     return detailData.value.order_start_time + 7200000  - Date.now()
  } )
  const stateMap = {
    '待支付': 10,
    '待服务': 20,
    '已完成': 30,
    '已取消': 40
  };
  
  const makeInfo = {
    service_name: '预约服务',
    hospital_name: '就诊医院',
    starttime: '期望就诊时间',
    'client.name': '就诊人',
    'client.mobile': '就诊人电话',
    receiveAddress: '接送地址',
    demand: '其他需求'
  };
    const orderInfo = {
    tel:'就诊人电话',
    order_start_time:'下单时间',
    price:'应付金额',
    out_trade_no:'订单编号'
}
  const formatData = (key) => {
    
    if (key.indexOf(".") === -1) {
      if (key === "order_start_time") {
        return formatTimestamp(detailData.value[key]);
      }
      return detailData.value[key] || 'N/A'; // Return 'N/A' if the value is undefined
    }
    
    let arr = key.split(".").reduce((o, p) => {
      return (o || {})[p];
    }, detailData.value);
    
    return arr || 'N/A'; 
  };
  
  function formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  
  onMounted(async () => {
    console.log(route.query.oid);
    const { data } = await proxy.$api.orderDetail({ oid: route.query.oid });
    detailData.value = data.data;
    console.log()
    Qrcode.toDataURL(data.data.code_url).then((url) => {
      codeImg.value = url;
    });
  });
  //二维码弹窗关闭
  const closeCode = () => {
    showCode.value = false;
    router.push('/detail');
  };
  //左上角箭头的的跳转
  const goBack = () => {
    router.go(-1);
  };
  </script>
  
  <style lang="less" scoped>
  .container {
    background-color: #f0f0f0;
    height: 100vh;
  }
  .header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    .header-left {
      float: left;
    }
  }
  .card {
    margin: 15px 0;
    padding: 10px;
    .header-text {
      padding-left: 5px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      border-left: 4px solid red;
    }
  }
  .dzf {
    padding: 20px;
    .text1 {
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
      color: #666;
    }
    .text2 {
      font-size: 14px;
      color: #666;
    }
    .text3 {
      text-align: center;
      .van-button {
        margin-top: 10px;
        margin-left: 10px;
        width: 80%;
        font-weight: bold;
      }
    }
  }
  ::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;
    .close {
      position: absolute;
      left: 20px;
    }
  }
  </style>
  